<template>
    <div class="message">
        <div @click="messageJump" class="message-item">
            <div class="box">
                <i class="iconfont">&#xe73f;</i>
                <div>点赞</div>
            </div>
        </div>
        <div @click="messageJump" class="message-item">
            <div class="box">
                <i class="iconfont">&#xe61e;</i>
                <div>评论</div>
            </div>
        </div>
        <div @click="messageJump" class="message-item">
            <div class="box">
                <i class="iconfont">&#xe60f;</i>
                <div>关注</div>
            </div>
        </div>
        <div @click="messageJump" class="message-item">
            <div class="box">
                <i class="iconfont">&#xe613;</i>
                <div>收藏</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    setup(props, context) {

        const messageJump = function () {
            context.parent.$message.error('该功能后台尚未开发完毕，请谅解， 请前往个人中心获取详情');
        }

        const methods = { messageJump }

        return {
            ...methods
        }
    }
}
</script>

<style lang="less" scoped>
.message {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.message-item {
    position: relative;
    height: 25%;
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        i {
            display: block;
            width: 2.666667rem;
            height: 2.666667rem;
            background-color: #f7f9fa;
            border-radius: 50%;
            line-height: 2.666667rem;
            text-align: center;
            font-size: 1.066667rem;
        }
        div {
            font-size: .8rem;
            text-align: center;
            margin-top: .4rem;
        }
    }
    
}
</style>